<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item) in levelList" :key="item.path">
        <el-button class="btn" type="text" @click.prevent="handleLink(item)">{{ item.meta.title }}</el-button>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
  import pathToRegexp from 'path-to-regexp'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        levelList: null
      }
    },
    computed: {
      ...mapGetters([
        'permission_routes',
        'routeList'
      ])
    },
    watch: {
      routeList: function (newValue, oldValue) {
        let menuList = []
        newValue.forEach(item => {
          this.permission_routes.forEach(edit => {
            if (edit.path === item.value) {
              let obj = edit
              obj.url = edit.path + '/'
              menuList.push(obj)
            } else if (edit.children && edit.children.length > 0) {
              edit.children.forEach(rout => {
                if (rout.path === item.value) {
                  let obj = rout
                  if (edit.path === '/alarmMessage') {
                    obj.url = edit.path + '/' + rout.path
                  } else {
                    obj.url = edit.path + '/' + rout.path + '/'
                  }
                  menuList.push(rout)
                } else if (rout.children && rout.children.length > 0) {
                  rout.children.forEach(son => {
                    if (son.path === item.value) {
                      let obj = son
                      obj.url = edit.path + '/' + rout.path + '/' + son.path + '/'
                      menuList.push(son)
                    }
                  })
                }
              })
            }
          })
        })

        this.levelList = JSON.parse(JSON.stringify(menuList))
      }
    },
    methods: {
      handleLink(item) {
        this.$router.push({ path: item.url })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-breadcrumb.el-breadcrumb {
    display: inline-block;
    font-size: 14px;
    line-height: 50px;
    margin-left: 8px;

    .no-redirect {
      color: #97a8be;
      cursor: text;
    }
    .btn {
      color: #666;
    }
    .btn:hover {
      color: #1890ff;
    }
  }
</style>
